<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>下拉菜单</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            基础下拉菜单
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <p>
                                        下拉菜单按钮
                                        <code>.btn-primary</code>
                                        下拉菜单项背景
                                        <code>.dropdown-menu-primary</code>
                                    </p>
                                    <p>
                                    <div class="dropdown">
                                        <button data-toggle="dropdown" class="btn btn-default  dropdown-toggle">
                                            默认样式下拉 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                        </ul>
                                    </div>
                                    <div class="dropdown">
                                        <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
                                            重要样式下拉 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-primary">
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                        </ul>
                                    </div>
                                    <div class="dropdown">
                                        <button data-toggle="dropdown" class="btn btn-info dropdown-toggle">
                                            信息样式下拉 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-info">
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                        </ul>
                                    </div>
                                    <div class="dropdown">
                                        <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">
                                            警告样式下拉 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-warning">
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                        </ul>
                                    </div>
                                    <div class="dropdown">
                                        <button data-toggle="dropdown" class="btn btn-success dropdown-toggle">
                                            成功样式下拉 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-success">
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                        </ul>
                                    </div>
                                    <div class="dropdown">
                                        <button data-toggle="dropdown" class="btn btn-danger dropdown-toggle">
                                            危险样式下拉 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-danger">
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                        </ul>
                                    </div>
                                    <div class="dropdown">
                                        <button data-toggle="dropdown"
                                            class="btn btn-primary btn-noline dropdown-toggle">
                                            按钮无边框下拉<span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                        </ul>
                                    </div>
                                    </p>
                                </div>
                                <div class="col-md-12">
                                    <p>下拉菜单方向对齐
                                        <code>.dropup</code>
                                        <code>.dropdown-menu-right</code>
                                    </p>
                                    <p>
                                    <div class="dropdown ">
                                        <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
                                            左下对齐 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                        </ul>
                                    </div>
                                    <div class="dropdown ">
                                        <button data-toggle="dropdown" class="btn btn-success dropdown-toggle">
                                            右下对齐 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                        </ul>
                                    </div>
                                    <div class="dropdown dropup ">
                                        <button data-toggle="dropdown" class="btn btn-info dropdown-toggle">
                                            左上对齐 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu ">
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                        </ul>
                                    </div>
                                    <div class="dropdown dropup ">
                                        <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">
                                            右上对齐 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                        </ul>
                                    </div>
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <p>下拉菜单组合</p>
                                    <p>
                                    <div class="dropdown ">
                                        <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
                                            图标菜单 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="#"><i class="fa fa-fw fa-plus"></i>新增</a></li>
                                            <li><a href="#"><i class="fa fa-fw fa-edit"></i>编辑</a></li>
                                            <li><a href="#"><i class="fa fa-fw fa-remove"></i>删除</a></li>
                                        </ul>
                                    </div>
                                    <div class="dropdown ">
                                        <button data-toggle="dropdown" class="btn btn-success   dropdown-toggle">
                                            图标菜单 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="#" class="space-between">未读消息
                                                    <span class="badge badge-primary pull-right">10</span>
                                                </a></li>
                                            <li><a href="#" class="space-between">已读消息
                                                    <span class="badge badge-success pull-right">4</span>
                                                </a></li>
                                            <li><a href="#" class="space-between">通知公告
                                                    <span class="badge badge-warning pull-right">8</span>
                                                </a></li>
                                        </ul>
                                    </div>
                                    <div class="dropdown ">
                                        <button data-toggle="dropdown" class="btn btn-info   dropdown-toggle">
                                            菜单选项禁用 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="#" class="space-between">未读消息
                                                    <span class="badge badge-primary pull-right">10</span>
                                                </a></li>
                                            <li class="disabled"><a href="#" class="space-between">已读消息
                                                    <span class="badge badge-success pull-right">4</span>
                                                </a></li>
                                            <li><a href="#" class="space-between">通知公告
                                                    <span class="badge badge-warning pull-right">8</span>
                                                </a></li>
                                        </ul>
                                    </div>
                                    <div class="dropdown">
                                        <button data-toggle="dropdown" class="btn btn-danger   dropdown-toggle">
                                            菜单选项分割 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="#" class="space-between">未读消息
                                                    <span class="badge badge-primary pull-right">10</span>
                                                </a></li>
                                            <li><a href="#" class="space-between">已读消息
                                                    <span class="badge badge-success pull-right">4</span>
                                                </a></li>
                                            <li class="divider"></li>
                                            <li><a href="#" class="space-between">通知公告
                                                    <span class="badge badge-warning pull-right">8</span>
                                                </a></li>
                                            <li><a href="#" class="space-between">个人私信
                                                    <span class="badge badge-warning pull-right">8</span>
                                                </a></li>
                                        </ul>
                                    </div>
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <p>按钮组下拉菜单</p>
                                    <p>
                                    <div class="btn-group ">

                                        <div class="btn-group dropdown">
                                            <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">选项一</a></li>
                                                <li><a href="#">选项二</a></li>
                                                <li><a href="#">选项三</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">选项四</a></li>
                                            </ul>
                                        </div>
                                        <button class="btn btn-default">默认</button>

                                    </div>
                                    <div class="btn-group">
                                        <button class="btn btn-default">默认</button>
                                        <div class="btn-group dropdown dropup">
                                            <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">选项一</a></li>
                                                <li><a href="#">选项二</a></li>
                                                <li><a href="#">选项三</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">选项四</a></li>
                                            </ul>
                                        </div>

                                    </div>
                                    <div class="dropdown">
                                        <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
                                            更多操作 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-primary">
                                            <li><a href="#">选项一</a></li>
                                            <li><a href="#">选项二</a></li>
                                            <li><a href="#">选项三</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">选项四</a></li>
                                        </ul>
                                    </div>
                                    <div class="btn-group ">
                                        <button class="btn btn-primary">1</button>
                                        <button class="btn btn-primary">2</button>
                                        <button class="btn btn-primary">3</button>
                                        <button class="btn btn-primary">4</button>
                                        <button class="btn btn-primary">5</button>
                                        <div class="btn-group dropdown">
                                            <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
                                                更多 <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">选项一</a></li>
                                                <li><a href="#">选项二</a></li>
                                                <li><a href="#">选项三</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">选项四</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    </p>
                                </div>
                                <div class="col-md-12">
                                    <p>下拉菜单按钮大小</p>
                                    <p>
                                    <div class="dropdown ">
                                        <button data-toggle="dropdown" class="btn btn-default btn-lg  dropdown-toggle">
                                            大按钮下拉 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                        </ul>
                                    </div>
                                    <div class="dropdown ">
                                        <button data-toggle="dropdown" class="btn btn-success   dropdown-toggle">
                                            正常大小 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-primary">
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                        </ul>
                                    </div>
                                    <div class="dropdown ">
                                        <button data-toggle="dropdown"
                                            class="btn btn-warning  btn-md   dropdown-toggle">
                                            小按钮菜单 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-warning">
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                        </ul>
                                    </div>
                                    <div class="dropdown ">
                                        <button data-toggle="dropdown"
                                            class="btn btn-danger btn-outline btn-xs  dropdown-toggle">
                                            超小按钮菜单 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-dabger">
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                            <li><a href="#">下拉选项下拉选项</a></li>
                                        </ul>
                                    </div>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            鼠标经过展开下拉菜单
                        </div>
                        <div class="panel-body">
                            <p>鼠标经过展开下拉菜单 <code>.hoverdown</code></p>
                            <p>
                            <div class="hoverdown">
                                <a class="btn btn-default hoverdown-toggle">默认样式下拉<span class="caret"></span></a>
                                <div class="hoverdown-menu">
                                    <ul>
                                        <li>
                                            <a>下拉菜单一</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单二</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单三</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="hoverdown">
                                <a class="btn btn-primary hoverdown-toggle">重要样式下拉<span class="caret"></span></a>
                                <div class="hoverdown-menu hoverdown-menu-primary">
                                    <ul>
                                        <li>
                                            <a>下拉菜单一</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单二</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单三</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="hoverdown">
                                <a class="btn btn-success hoverdown-toggle">成功样式下拉<span class="caret"></span></a>
                                <div class="hoverdown-menu hoverdown-menu-success">
                                    <ul>
                                        <li>
                                            <a>下拉菜单一</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单二</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单三</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="hoverdown">
                                <a class="btn btn-info hoverdown-toggle">信息样式下拉<span class="caret"></span></a>
                                <div class="hoverdown-menu hoverdown-menu-info">
                                    <ul>
                                        <li>
                                            <a>下拉菜单一</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单二</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单三</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="hoverdown">
                                <a class="btn btn-warning hoverdown-toggle">警告样式下拉<span class="caret"></span></a>
                                <div class="hoverdown-menu hoverdown-menu-warning">
                                    <ul>
                                        <li>
                                            <a>下拉菜单一</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单二</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单三</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="hoverdown">
                                <a class="btn btn-danger hoverdown-toggle">危险样式下拉<span class="caret"></span></a>
                                <div class="hoverdown-menu hoverdown-menu-danger">
                                    <ul>
                                        <li>
                                            <a>下拉菜单一</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单二</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单三</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="hoverdown">
                                <button class="btn btn-primary btn-noline hoverdown-toggle">
                                    按钮无边框下拉<span class="caret"></span>
                                </button>
                                <div class="hoverdown-menu">
                                    <ul>
                                        <li><a href="#">下拉选项下拉选项</a></li>
                                        <li><a href="#">下拉选项下拉选项</a></li>
                                        <li><a href="#">下拉选项下拉选项</a></li>
                                    </ul>
                                </div>
                            </div>
                            </p>
                            <p>下拉菜单方向 <code>.hoverdown .hoverup .hoverdown-menu-right</code></p>
                            <p>
                            <div class="hoverdown">
                                <a class="btn btn-default hoverdown-toggle">左下对齐<span class="caret"></span></a>
                                <div class="hoverdown-menu">
                                    <ul>
                                        <li>
                                            <a>下拉菜单一</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单二</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单三</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="hoverdown">
                                <a class="btn btn-primary hoverdown-toggle">右下对齐<span class="caret"></span></a>
                                <div class="hoverdown-menu hoverdown-menu-right">
                                    <ul>
                                        <li>
                                            <a>下拉菜单一</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单二</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单三</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="hoverdown hoverup">
                                <a class="btn btn-success hoverdown-toggle">左上对齐<span class="caret"></span></a>
                                <div class="hoverdown-menu ">
                                    <ul>
                                        <li>
                                            <a>下拉菜单一</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单二</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单三</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="hoverdown hoverup">
                                <a class="btn btn-info hoverdown-toggle">右上对齐<span class="caret"></span></a>
                                <div class="hoverdown-menu hoverdown-menu-right">
                                    <ul>
                                        <li>
                                            <a>下拉菜单一</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单二</a>
                                        </li>
                                        <li>
                                            <a>下拉菜单三</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="hoverdown">
                                <a class="btn btn-warning hoverdown-toggle">下拉菜单组合<span class="caret"></span></a>
                                <div class="hoverdown-menu hoverdown-menu-warning">
                                    <ul>
                                        <li><a href="#" class="space-between">未读消息
                                                <span class="badge badge-primary pull-right">10</span>
                                            </a></li>
                                        <li><a href="#" class="space-between">已读消息
                                                <span class="badge badge-warning pull-right">8</span>
                                            </a></li>
                                        <li class="divider"></li>
                                        <li><a href="#"><i class="fa fa-fw fa-plus"></i>新增</a></li>
                                        <li><a href="#"><i class="fa fa-fw fa-edit"></i>编辑</a></li>
                                        <li class="divider"></li>
                                        <li class="disabled"><a href="#">禁用选项</a></li>
                                    </ul>
                                </div>
                            </div>
                            </p>
                            <p>按钮组下拉菜单</p>
                            <p>
                            <div class="btn-group ">
                                <button class="btn btn-default">默认</button>

                                <div class="btn-group hoverdown">
                                    <button class="btn btn-default hoverdown-toggle">
                                        <span class="caret"></span>
                                    </button>
                                    <div class="hoverdown-menu">
                                        <ul>
                                            <li><a href="#">选项一</a></li>
                                            <li><a href="#">选项二</a></li>
                                            <li><a href="#">选项三</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">选项四</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="btn-group ">
                                <button class="btn btn-default">默认</button>

                                <div class="btn-group hoverdown hoverup">
                                    <button class="btn btn-default hoverdown-toggle">
                                        <span class="caret"></span>
                                    </button>
                                    <div class="hoverdown-menu">
                                        <ul>
                                            <li><a href="#">选项一</a></li>
                                            <li><a href="#">选项二</a></li>
                                            <li><a href="#">选项三</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">选项四</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="btn-group ">
                                <button class="btn btn-primary">1</button>
                                <button class="btn btn-primary">2</button>
                                <button class="btn btn-primary">3</button>
                                <button class="btn btn-primary">4</button>
                                <button class="btn btn-primary">5</button>
                                <div class="btn-group hoverdown">
                                    <button class="btn btn-primary hoverdown-toggle">
                                        更多 <span class="caret"></span>
                                    </button>
                                    <div class="hoverdown-menu">
                                        <ul >
                                            <li><a href="#">选项一</a></li>
                                            <li><a href="#">选项二</a></li>
                                            <li><a href="#">选项三</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">选项四</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
</body>

</html>